import React from 'react';
import {
  MessageOutline,
  RightOutline,
  SearchOutline,
  EnvironmentOutline,
  HeartOutline,
  UserOutline,
  CalendarOutline,
  StarOutline,
  AppOutline,
  MailOutline,
  EyeOutline,
  ScanningOutline,
  HistogramOutline,
  SmileOutline
} from 'antd-mobile-icons';
import '../styles/homePage.scss'
import { useNavigate } from 'react-router-dom';
import NavHeader from '../components/NavHeader'
import TabBarFooter from '../components/TabBarFooter'

// 科室类型定义
interface Department {
  id: string;
  name: string;
  icon: React.ReactNode;
  bgColor: string;
  iconColor: string;
}

// 医院类型定义
interface Hospital {
  id: string;
  name: string;
  level: string;
  type: string;
  distance: string;
  imageUrl?: string;
  tags?: string[];
}

const HomePage: React.FC = () => {
  const navigate = useNavigate();

  // 科室数据 - 优化图标和背景色
  const departments: Department[] = [
    {
      id: '1',
      name: '心内科',
      icon: <HeartOutline />,
      bgColor: '#fff0f6',
      iconColor: '#eb2f96'
    },
    {
      id: '2',
      name: '神经内科',
      icon: <ScanningOutline />,
      bgColor: '#f9f0ff',
      iconColor: '#772ed1'
    },
    {
      id: '3',
      name: '口腔科',
      icon: <SmileOutline />,
      bgColor: '#e6fffb',
      iconColor: '#13c2c2'
    },
    {
      id: '4',
      name: '眼科',
      icon: <EyeOutline />,
      bgColor: '#e6f7ff',
      iconColor: '#1890ff'
    },
    {
      id: '5',
      name: '耳鼻喉科',
      icon: <MailOutline />,
      bgColor: '#fcffe6',
      iconColor: '#a0d911'
    },
    {
      id: '6',
      name: '皮肤科',
      icon: <StarOutline />,
      bgColor: '#fff7e6',
      iconColor: '#fa8c16'
    },
    {
      id: '7',
      name: '儿科',
      icon: <UserOutline />,
      bgColor: '#f0f5ff',
      iconColor: '#2f54eb'
    },
    {
      id: '8',
      name: '妇产科',
      icon: <CalendarOutline />,
      bgColor: '#fffbe6',
      iconColor: '#faad14'
    },
  ]

  // 医院数据
  const hospitals: Hospital[] = [
    {
      id: '1',
      name: '北京协和医院',
      level: '三级甲等',
      type: '综合医院',
      distance: '1.2km',
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      tags: ['综合', '内科', '外科']
    },
    {
      id: '2',
      name: '北京人民医院',
      level: '三级甲等',
      type: '综合医院',
      distance: '3.5km',
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      tags: ['综合', '儿科', '内科']
    },
    {
      id: '3',
      name: '中国医学科学院肿瘤医院',
      level: '三级甲等',
      type: '专科医院',
      distance: '5.7km',
      imageUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      tags: ['肿瘤科', '外科']
    }
  ]

  return (
    <div className="home-page">
      {/* 使用公共顶部导航栏组件 */}
      <NavHeader title='医预通' showBack={false} right={<MessageOutline />} />

      {/* 主内容区域 */}
      <div className="home-content">
        {/* 搜索框 */}
        <div className="search-container" onClick={() => navigate('/hospital-list')}>
          <SearchOutline className='search-icon' />
          <span className="search-text">搜索医院、科室、医生</span>
        </div>

        {/* 名医馆部分 */}
        <div className="famous-hospital-section">
          <div className="section-title">名医馆</div>
        </div>

        {/* 功能菜单 */}
        <div className="function-menu">
          <div className="menu-item" onClick={() => navigate('/hospital-list')}>
            <div className="icon hospital-icon">
              <HistogramOutline />
            </div>
            <span className="text">找医院</span>
          </div>
          <div className="menu-item" onClick={() => navigate('/departments')}>
            <div className="icon department-icon">
              <AppOutline />
            </div>
            <span className="text">找科室</span>
          </div>
          <div className="menu-item" onClick={() => navigate('/doctors/all')}>
            <div className="icon doctor-icon">
              <UserOutline />
            </div>
            <span className="text">找医生</span>
          </div>
          <div className="menu-item" onClick={() => navigate('/my-appointments')}>
            <div className="icon appointment-icon">
              <CalendarOutline />
            </div>
            <span className="text">我的预约</span>
          </div>
        </div>

        {/* 健康直通车 */}
        <div className="section-header">
          <span className="title">健康直通车</span>
          <span className="more" onClick={() => navigate('/departments')}>
            更多科室 <RightOutline fontSize={12} />
          </span>
        </div>

        {/* 科室网格 - 优化样式 */}
        <div className="department-grid">
          {departments.map(dept => (
            <div
              className="department-item"
              key={dept.id}
              onClick={() => navigate(`/doctors/${dept.id}`)}
              style={{ backgroundColor: dept.bgColor }}
              title={`查看${dept.name}医生列表`}
            >
              <div className="department-icon" style={{ color: dept.iconColor }}>
                {dept.icon}
              </div>
              <span className="department-name">{dept.name}</span>
            </div>
          ))}
        </div>

        {/* 附近医院 */}
        <div className="section-header">
          <span className="title">附近医院</span>
          <span className="more" onClick={() => navigate('/hospital-list')}>
            查看全部 <RightOutline fontSize={12} />
          </span>
        </div>

        <div className="nearby-hospitals">
          {hospitals.map(hospital => (
            <div className="hospital-card" key={hospital.id} onClick={() => navigate(`/hospital/${hospital.id}`)}>
              <div className="hospital-logo">
                {hospital.imageUrl && <img src={hospital.imageUrl} alt={hospital.name} />}
              </div>
              <div className="hospital-info">
                <div className="hospital-name">{hospital.name}</div>
                <div className="hospital-tags">
                  {hospital.tags?.map((tag, index) => (
                    <span className="tag" key={index}>{tag}</span>
                  ))}
                </div>
                <div className="hospital-type">
                  {hospital.level} | {hospital.type}
                </div>
                <div className="hospital-distance">
                  <EnvironmentOutline className='location-icon' />
                  <span>{hospital.distance}</span>
                </div>
              </div>
              <button className="booking-btn" onClick={(e) => {
                e.stopPropagation();
                navigate(`/doctor-list?hospitalId=${hospital.id}`);
              }}>预约</button>
            </div>
          ))}
        </div>
      </div>

      {/* 使用公共底部标签栏组件 */}
      <TabBarFooter activeKey='home' />
    </div>
  )
}

export default HomePage;
